'use client';

import { useApp } from '@/contexts/AppContext';
import { useEffect, useState } from 'react';

export default function CartButton() {
  const { state } = useApp();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  // 防止hydration不匹配，初始渲染时显示0
  const displayCount = mounted ? state.cartCount : 0;

  return (
    <a href="/cart" className="relative p-2 hover:bg-gray-100 rounded transition-colors">
      <span className="text-xl">🛒</span>
      <span className="absolute -top-1 -right-1 bg-orange-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
        {displayCount > 99 ? '99+' : displayCount}
      </span>
    </a>
  );
}